<template>
  <div class="register">
    <p>×</p>
    <h3>注册</h3>
    <div class="data">
      <div class="inp">
        <input type="text" placeholder="手机/用户名" v-model="from.name" />
      </div>
      <div class="inp">
        <input type="password" placeholder="密码" v-model="from.pass" />
      </div>
      <div class="inp">
        <input type="password" placeholder="确认密码" />
      </div>
      <button @click="register" :class="{ static: this.from.name }">注册</button>
      <div class="tishi">
        <p @click="go">去登陆</p>
      </div>
    </div>
  </div>
</template>

<script>
import { user_register } from "../../api/index.js";
export default {
  methods: {
    register() {
      console.log(this.from.name);
      console.log(this.from.pass);
      user_register({ phone: this.from.name, pass: this.from.pass }).then(
        (res) => {
          console.log(res.data);
          alert(res.data.msg);
          if (res.data.code == 200) {
            this.$router.push('/login');
          }
        }
      );
    },
    go(){
      this.$router.push('/login');
    }
  },
  data() {
    return {
      from: [{ name: this.name, pass: this.pass }],
    };
  },
};
</script>

<style scoped>
.register {
  padding: 20px;
}
p {
  font-size: 25px;
}

h3 {
  margin-top: 30px;
}
.inp {
  margin: 20px 0;
}

.inp input {
  width: 100%;
  height: 30px;
  outline: none;
  border: 0;
  border-bottom: 1px solid gray;
}

button {
  width: 100%;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background-color: rgb(202, 198, 198);
  color: gray;
  margin-top: 20px;
  transition: all 0.3s;
}

.data .tishi {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.data .tishi p {
  color: blue;
  font-size: 13px;
}
.data .static{
    background-color: blueviolet;
    color: white;
}
</style>